<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        body {
            text-align: center
        }

        #divcss5 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 900px;
            height: 500px
        }

        #nav {
            width: 730px;
            height: 50px;
            background-color: #DFD4B5;
            margin: auto;
        }

        /*子类选择器 > */
        #nav > ul {
            font-weight: bold;
            font-size: small;
            line-height: 50px;
            margin: auto;
        }

        #nav > ul > li {
            list-style-type: none;
            float: left;
        }

        #nav span {
            padding-left: 10px;
            padding-right: 10px;
        }

        li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        li:active {
            color: red;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="{{ url_for('nav') }}">首页<span>|</span></li>
        <li><a href="{{ url_for('zxt') }}">折线图<span>|</span></li>
        <li><a href="{{ url_for('bing') }}">饼状图<span>|</span></li>
        <li><a href="{{ url_for('three_d') }}">3D图<span>|</span></li>
        <li><a href="{{ url_for('rose') }}">玫瑰图<span>|</span></li>
        <li><a href="{{ url_for('ldt') }}">漏斗图<span>|</span></li>
        <li><a href="{{ url_for('zzt') }}">柱状图<span>|</span></li>
        <li><a href="{{ url_for('wordcloud') }}">词云图<span>|</span></li>
        <li><a href="{{ url_for('sdt') }}">散点图</li>
    </ul>
</div>
<div id="divcss5">
    <div id="41863b80951f4b6cbde13b500ea32861" class="chart-container" style="width:900px; height:500px;"></div>
</div>
<script>
    var chart_41863b80951f4b6cbde13b500ea32861 = echarts.init(
        document.getElementById('41863b80951f4b6cbde13b500ea32861'), 'dark', {renderer: 'canvas'});
    var option_41863b80951f4b6cbde13b500ea32861 = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "series": [
            {
                "type": "funnel",
                "name": "\u5f39\u5e55\u957f\u5ea6\u5206\u6790",
                "data": [
                    {
                        "name": "\u5f39\u5e55\u957f\u5ea61-3\u7684\u5360\u6bd4",
                        "value": 66.6
                    },
                    {
                        "name": "\u5f39\u5e55\u957f\u5ea64-10\u7684\u5360\u6bd4",
                        "value": 17.8
                    },
                    {
                        "name": "\u5f39\u5e55\u957f\u5ea611-20\u7684\u5360\u6bd4",
                        "value": 14.03
                    },
                    {
                        "name": "\u5f39\u5e55\u957f\u5ea621-40\u7684\u5360\u6bd4",
                        "value": 1.53
                    },
                    {
                        "name": "\u5f39\u5e55\u957f\u5ea640+\u7684\u5360\u6bd4",
                        "value": 0.03
                    }
                ],
                "sort": "descending",
                "gap": 2,
                "label": {
                    "show": true,
                    "position": "inside",
                    "margin": 8
                },
                "tooltip": {
                    "show": true,
                    "trigger": "item",
                    "triggerOn": "mousemove|click",
                    "axisPointer": {
                        "type": "line"
                    },
                    "formatter": "{a} <br/>{b} : {c}%",
                    "textStyle": {
                        "fontSize": 14
                    },
                    "borderWidth": 0
                },
                "itemStyle": {
                    "borderColor": "#fff",
                    "borderWidth": 1
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "\u5f39\u5e55\u957f\u5ea621-40\u7684\u5360\u6bd4",
                    "\u5f39\u5e55\u957f\u5ea611-20\u7684\u5360\u6bd4",
                    "\u5f39\u5e55\u957f\u5ea640+\u7684\u5360\u6bd4",
                    "\u5f39\u5e55\u957f\u5ea64-10\u7684\u5360\u6bd4",
                    "\u5f39\u5e55\u957f\u5ea61-3\u7684\u5360\u6bd4"
                ],
                "selected": {
                    "\u5f39\u5e55\u957f\u5ea61-3\u7684\u5360\u6bd4": true,
                    "\u5f39\u5e55\u957f\u5ea64-10\u7684\u5360\u6bd4": true,
                    "\u5f39\u5e55\u957f\u5ea611-20\u7684\u5360\u6bd4": true,
                    "\u5f39\u5e55\u957f\u5ea621-40\u7684\u5360\u6bd4": true,
                    "\u5f39\u5e55\u957f\u5ea640+\u7684\u5360\u6bd4": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "title": [
            {
                "text": "\u5f39\u5e55\u957f\u5ea6\u5206\u6790",
                "subtext": "\u6570\u636e\u771f\u5b9e\u53ef\u9760",
                "bottom": 20,
                "padding": 5,
                "itemGap": 10
            }
        ]
    };
    chart_41863b80951f4b6cbde13b500ea32861.setOption(option_41863b80951f4b6cbde13b500ea32861);
</script>
</body>
</html>
